<!--suppress ALL -->
<template>
  <div id="image">
    <div>

      <div class="title" style="font-size: 20px;color: #000;padding: 10px;border-bottom: 1px solid #f2f2f2">
        2018-04-27
      </div>

      <el-card :body-style="{ padding: '0px' }" class="img-list">
        <img src="../../assets/hamb.png" class="image">
        <div style="padding: 14px;">
          <span>好吃的汉堡</span>
          <div class="bottom clearfix">
            <time class="time">{{ timeFormatter(currentDate) }}</time>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '0px' }" class="img-list">
        <img src="../../assets/hamb.png" class="image" @click="imgClick">
        <div style="padding: 14px;">
          <span>好吃的汉堡1213</span>
          <div class="bottom clearfix">
            <time class="time">{{ timeFormatter(currentDate) }}</time>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '0px' }" class="img-list">
        <img src="../../assets/hamb.png" class="image">
        <div style="padding: 14px;">
          <span>好吃的汉堡</span>
          <div class="bottom clearfix">
            <time class="time">{{ timeFormatter(currentDate) }}</time>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '0px' }" class="img-list">
        <img src="../../assets/hamb.png" class="image">
        <div style="padding: 14px;">
          <span>好吃的汉堡</span>
          <div class="bottom clearfix">
            <time class="time">{{ timeFormatter(currentDate) }}</time>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '0px' }" class="img-list">
        <img src="../../assets/hamb.png" class="image">
        <div style="padding: 14px;">
          <span>好吃的汉堡</span>
          <div class="bottom clearfix">
            <time class="time">{{ timeFormatter(currentDate) }}</time>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 弹窗 -->
    <popup :data="imgArr" :show="isShowPopup" @close="close"></popup>
  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator'
  import Popup from '../../components/popup/index.vue'

  @Component({
    components: {
      Popup
    }
  })
  export default class image extends Vue {
    name: string = "image-list";
    isShowPopup: boolean = false;
    imgArr = [];
    currentDate: Date = new Date();
    timeFormatter(date) {
      return (this as any).$api.api_date(date, "yyyy-MM-dd hh:mm")
    }

    imgClick() {
      this.imgArr = [
        {
          src: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d2712eeb6963f62408503151e62d809d/32fa828ba61ea8d3dd71d1d6950a304e241f5894.jpg',
          alt: '株洲'
        },
        {
          src: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d2712eeb6963f62408503151e62d809d/32fa828ba61ea8d3dd71d1d6950a304e241f5894.jpg',
          alt: '长沙'
        }
      ];
      this.isShowPopup = true;
    }

    close() {
      this.isShowPopup = false;
    }
  }
</script>

<style lang="scss">
  @import "../../assets/scss/config";

  #image {

    width: $middle-width;
    /*min-height: 900px;*/
    .img-list {
      width: 22%;
      margin: 10px;
      display: inline-block;
    }

    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }
  }

</style>
